<%@page language="java" pageEncoding="UTF-8"
	contentType="text/html; charset=UTF-8"%>
<jsp:include page="/general/templatetop.jsp" />
<script type="text/javascript" src="../js/jquery.dataTables.fnReloadAjax.js"></script>
<script type="text/javascript">
var oTable;
</script>
<script type="text/javascript" charset="ISO-8859-1">
	function cargarTablita(){
		$('#proyectos_list').html(tablaVacia());
		oTable = $('#tabla_proyectos').dataTable( {
			"bProcessing": true,
			"bRetrieve": true,
			"bDestroy": true,
			"bJQueryUI": true,
			"sAjaxSource": '../datosjson/listarProyectosJSON',
			"sAjaxDataProp": "proyectos",
			"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
			var td = $('td:eq(0)', nRow);
				//console.log(td.text());
				td.attr('style', 'display:none');
				var linkBorrar= '<a href="#" onclick=borrar(' + td.text() + ') ><img alt="borrar" src="../img/delete.png" /></a>';
				var linkVer = '<a href="../proyectos/verProyecto?proyecto.idProyecto=' + td.text() + '" ><img alt="Ver Detalles" src="../img/detalles.png" /></a>';
				var dialogParams = "'../proyectos/inputProyecto?proyecto.idProyecto=" + td.text() + "','Editar Proyecto',400, 500";
				
				var linkEditar = '<a href="#" onClick="openDialog('+ dialogParams + ')" ><img alt="borrar" src="../img/editar.png" /></a>';
				//console.log(linkEditar);
				$('td:eq(9)', nRow).html(linkVer + linkBorrar + linkEditar);
				return nRow;
			},
			"aoColumns": [
							{"mDataProp": "idProyecto"},
							{"mDataProp": "nombre"},
							{"mDataProp": "descripcion" },
							{"mDataProp": "estadoProyecto"},
							{"mDataProp": "fechaDeInicio"},
							{"mDataProp": "fechaDeFin"},
							{"mDataProp": "fechaDeUltimoCambio"},
							{"mDataProp": "horasAsignadas"},
							{"mDataProp": "responsable"},
							{"mDataProp": null}
			  		],
					"sDom": '<"H"Tfr>t<"F"ip>',
					"oTableTools": {
						"sSwfPath": "../media/swf/copy_cvs_xls.swf",
						"aButtons": [
										{
											"sExtends": "copy",
											"sButtonText": "Copiar",
											"mColumns": [ 1, 2, 3, 4, 5, 6, 7, 8 ],
											"sToolTip": "Copiar al clipboard"
										},
										{
											"sExtends": "xls",
											"mColumns": [ 1, 2, 3, 4, 5, 6, 7, 8 ],
											"sFileName": "Proyectos.xls",
											"sToolTip": "Grabar en archivo excel"
										},
										{
											"sExtends": "print",
											"sButtonText": "Imprimir",
											"mColumns": [ 1, 2, 3, 4, 5, 6, 7, 8 ],
											"sToolTip": "Generar vista previa"
										},
									]
							
					}
			  		
		});
		$('.hidden').hide();
	};
	
	function borrar(id){
		$.post('../proyectos/borrarProyecto', {'proyecto.idProyecto':id}).complete(function(){
				oTable.fnDestroy();
				cargarTablita()});
		return false;
	};

	function openDialog(url, title, height, width){
		var dialog = $('<div id="dialog_form"></div>').appendTo('body');

		dialog.dialog({
			modal:true,
			height: height,
			width: width,
			title: title,
			position: 'center',
			open: function(){
				$(this).load(url);
			},
			buttons: { 
		        'Guardar': function() { saveButton(); },
		        'Cancelar':function() {$(this).dialog("close");} 
		        }
		});
	};

	function tablaVacia(){
		return '<center><table cellpadding="0" cellspacing="0" border="0" class="display" id="tabla_proyectos"><thead><th class="hidden">ID</th><th>Nombre</th><th>Descripción</th><th>Estado</th><th>Inicio</th><th>Fin</th><th>Último Cambio</th><th>Horas Asignadas</th><th>Responsable</th><th>&nbsp;&nbsp;Acciones&nbsp;&nbsp;</th></thead></table></center>';
	};
	
	$(document).ready(function() {
		cargarTablita();
		$('#crear_proyecto').button();
	} );
</script>
<button id="crear_proyecto" onclick="openDialog('../proyectos/inputProyecto', 'Agregar Proyecto', 370, 450)">Crear Proyecto</button>

<div id="proyectos_list">
	
</div>

<jsp:include page="/general/templatefooter.jsp" />